<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        opacity: 0.5;
    }
</style>

<body>
    <canvas id="app"></canvas>
    <canvas id="$cut"></canvas>
    <div class="fps"></div>
    <style>
        .fps {
            position: absolute;
            font-size: 30px;
            top: 0;
            right: 100px;
            z-index: 2;
            background-color: white;
            color: red;
        }
    </style>


    <script>
        var $pp = new Easycanvas.Painter({
            el: '#app',
            fullScreen: true,
            webgl: {
                camera: {
                    enable: !true,
                    current: {
                        x: 0,
                        y: 0,
                        z: -1000,
                    },
                    target: {
                        x: 0,
                        y: 0,
                        z: 0,
                    },
                },
            },
        });

        var $fpsBox = document.getElementsByClassName('fps')[0];
        $pp.fpsHandler = function (fps) {
            if ($pp.$perf && $pp.$perf.preprocessTimeSpend) {
                $fpsBox.innerText = fps + 'fps,' + $pp.$perf.preprocessTimeSpend + ',' + $pp.$perf.paintTimeSpend;
            } else {
                $fpsBox.innerText = fps;
            }
        };


        // $pp.add({
        //     style: {
        //         left: 0, top: 0,
        //     },
        //     webgl: window.Easycanvas.webglShapes.ball({
        //         r: 250, b: 20,
        //         // colors: [255, 0, 0, 255, 255, 0, 0, 255, 0]
        //         colors: [255, 0, 0]
        //     }),
        // });

        // Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
        //     // create a Sprite
        //     window.Sprite2d = $pp.add({
        //         name: '2d',
        //         content: {
        //             img: img,
        //         },
        //         style: {
        //             width: 250, height: 130,
        //             cutLeft: 0, cutTop: 0, // source position, default 0
        //             left: Easycanvas.Transition.pendulum(111, 222, 2500).loop(),
        //             top: 80,
        //             opacity: 1,
        //             rotate: 20,
        //             locate: 'center', // default center
        //             zIndex: 2, // z-index of this image
        //         },
        //         events: {
        //             eIndex: 2, // event-index of this image
        //             mousemove: function (e) {
        //                 // "this" means this Sprite, as Sprite1
        //                 console.log(this, e);
        //             },
        //             // others: mousehold, mousedown, mouseout and touch events
        //         },
        //     });
        // });

        // 2500 40fps => 47 ==code style==> 50
        for (var i = 0; i < 25; i++) {
            // 目前现象是zIndex会影响事件顺序，但是取色时应该不影响才对
            var zIndex = Math.random();
            var tz = Math.random() * 1000 - 500;
            $pp.add({
                style: {
                    left: Math.random() * 1000 - 500,
                    top: Math.random() * 1000 - 500,
                    zIndex: zIndex
                },
                webgl: window.Easycanvas.webglShapes.block({
                    tz: tz,
                    a: 200, b: 100, c: 50,
                    colors: [
                        Math.random() * 255,
                        Math.random() * 255,
                        Math.random() * 255,
                        // Math.random() * 255,
                    ],
                }),
                events: {
                    mousemove: function () {
                        this.updateWebglStyle('colors', [
                            Math.random() * 255,
                            Math.random() * 255,
                            Math.random() * 255,
                        ]);

                        // console.log(this.webgl.zIndex);
                        // console.log(this.webgl.$eventFlag);
                    }
                }
            });
        }

        $pp.start();

        // var $cut = new Easycanvas.Painter({
        //     el: '#cut',
        //     fullScreen: true,
        // });

        var interval = 2000;
        var current = $pp.webgl.camera.current;

        function changeCamera () {
            Easycanvas.Transition(current, 'x', 'ease', Math.random() * 1000 - 500, interval);
            Easycanvas.Transition(current, 'y', 'ease', Math.random() * 1000 - 500, interval);
            Easycanvas.Transition(current, 'z', 'linear', -1000 - Math.random() * 500, interval);
        }

        // changeCamera();
        // setInterval(changeCamera, interval);
    </script>
</body>

